<script setup>
import axios from 'axios'
import { onMounted, ref } from 'vue'
const dialogFormVisible = ref(false)

const pagination = ref([])
const currentPage = ref(1)
const pageSize = ref(6)
const form = ref({
  studentName: null,
  institute: null,
  major: null,
  grade: null,
  clazz: null,
  sex: null,
  tel: null,
  studentId: null
})

onMounted(() => {
  handleCurrentChange()
})

const handleCurrentChange = () => {
  axios.get('api/studentcontroller/findAll/' + currentPage.value + '/' + pageSize.value).then(res => {
    pagination.value = res.data
    console.log(pagination.value)
  })
}

const checkGrade = (studentId) => {
  dialogFormVisible.value = true
  axios.get('api/studentcontroller/findById/' + studentId).then(res => {
    form.value = res.data
  })
}

const deleteById = (studentId) => {
  axios.get('api/studentcontroller/deleteById/' + studentId).then(res => {
    handleCurrentChange()
  })
}

const summit = () => {
  axios.post('api/studentcontroller/update', {
    studentName: form.value.studentName,
    institute: form.value.institute,
    major: form.value.major,
    grade: form.value.grade,
    clazz: form.value.clazz,
    sex: form.value.sex,
    tel: form.value.tel,
    studentId: form.value.studentId
  }).then(res => {
    console.log(form.value.studentId)
    dialogFormVisible.value = false
    handleCurrentChange()
  })
}
</script>

<template>
<div class="all">
    <el-table :data="pagination" :border="true">
      <el-table-column fixed="left" prop="studentName" label="姓名" width="180"></el-table-column>
      <el-table-column prop="institute" label="学院" width="200"></el-table-column>
      <el-table-column prop="major" label="专业" width="200"></el-table-column>
      <el-table-column prop="grade" label="年级" width="200"></el-table-column>
      <el-table-column prop="clazz" label="班级" width="100"></el-table-column>
      <el-table-column prop="sex" label="性别" width="120"></el-table-column>
      <el-table-column prop="tel" label="联系方式" width="120"></el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template #default="scope">
          <el-button @click="checkGrade(scope.row.studentId)" type="primary" size="small">编辑</el-button>
          <el-button @click="deleteById(scope.row.studentId)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-model:currentPage="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[1,2,3]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="20"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <el-dialog
      title="编辑试卷信息"
      v-model="dialogFormVisible"
      width="30%">
      <section class="update">
        <el-form :model="form" label-width="80px">
          <el-form-item label="姓名">
            <el-input v-model="form.studentName"></el-input>
          </el-form-item>
          <el-form-item label="学院">
            <el-input v-model="form.institute"></el-input>
          </el-form-item>
          <el-form-item label="专业">
            <el-input v-model="form.major"></el-input>
          </el-form-item>
          <el-form-item label="年级">
            <el-input v-model="form.grade"></el-input>
          </el-form-item>
          <el-form-item label="班级">
            <el-input v-model="form.clazz"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-input v-model="form.sex"></el-input>
          </el-form-item>
          <el-form-item label="电话号码">
            <el-input v-model="form.tel"></el-input>
          </el-form-item>
        </el-form>
      </section>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">Cancel</el-button>
        <el-button type="primary" @click="summit()">Summit</el-button
        >
      </span>
    </template>
    </el-dialog>
    </div>
</template>

<style lang="less" scoped>
.all {
  padding: 0px 40px;
  .page {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .edit {
    margin-left: 20px;
  }
  .el-table tr {
    background-color: #dd5862 !important;
  }
}
.el-table .warning-row {
  background: #000 !important;
}

.el-table .success-row {
  background: #dd5862;
}
</style>
